<template>
  <div class='container'>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>{{getId}}</span>
  </div>
  <el-form label-width="100px" size="medium" :model="form" :rules="rules" ref="ruleForm" >
    <!-- 学科 -->
  <el-form-item label="学科" prop="subjectID">
      <el-select  placeholder="请选择学科"
       v-model="form.subjectID"
       @change="getDirectorys"
>
      <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value" ></el-option>
</el-select>
  </el-form-item>
  <!-- 目录 -->
  <el-form-item label="目录" prop="catalogID">
    <el-select  placeholder="请选择目录" v-model="form.catalogID">
      <el-option v-for="item in directorys" :key="item.id" :label="item.directoryName" :value="item.id" ></el-option>
    </el-select>
  </el-form-item>
  <!-- 企业 -->
  <el-form-item label="企业" prop="enterpriseID" >
    <el-select  placeholder="请选择企业" v-model="form.enterpriseID">
      <el-option v-for="item in companys" :key="item.id"  :label="item.shortName" :value="item.id" ></el-option>

    </el-select>
  </el-form-item>
  <!-- 城市 -->
  <el-form-item label="城市"  prop="province">
    <el-select  placeholder="请选择所在的省" v-model="form.province" @change="getCitys">
      <el-option v-for="(item,index) in provinces" :key="index" :value="item" :label="item" ></el-option>
    </el-select>
     <el-select  placeholder="请选择所在的市" v-model="form.city"  >
      <el-option v-for="(item,index) in citys" :key="index" :value="item" :label="item"></el-option>
    </el-select>
  </el-form-item>

  <!-- 方向 -->
  <el-form-item label="方向" prop="direction" >
    <el-select  placeholder="请选择方向"  v-model="form.direction">
      <el-option v-for="(item,index) in direction" :key="index" :label="item"  :value="item"></el-option>

    </el-select>
  </el-form-item>
<!-- 提型 -->
  <el-form-item label="提型" prop="questionType">
      <el-radio-group  v-model="form.questionType"  @change="radio">
    <el-radio v-for="item in questionType" :key="item.value" :label="item.value" >{{item.label}}</el-radio>

  </el-radio-group>
  </el-form-item>
 <!-- 难度-->
  <el-form-item label="难度" prop="difficulty"  @change="radio">
      <el-radio-group  v-model="form.difficulty" >
    <el-radio v-for="item in difficulty" :key="item.value" :label="item.value" >{{item.label}}</el-radio>
  </el-radio-group>
  </el-form-item>
 <!--  题干-->
  <el-form-item label="题干"  prop="question" >
  <quill-editor class="editor"  v-model="form.question" contenteditable="true" ></quill-editor>
  </el-form-item>
  <!--选项-->
 <el-form-item label="选项" v-show="options1">
  <div class="item"  v-for="(item,index) in form.options" :key="index" ref="radio" >
      <el-radio-group v-model="code" v-if="disabled" >
          <el-radio :label="item.code" >{{item.code}}
          </el-radio>
      </el-radio-group>
      <el-checkbox-group v-model="code1" v-else>
        <el-checkbox :label="item.code">{{item.code}}</el-checkbox>
      </el-checkbox-group>
    <el-input  v-model="form.options[index].title">
        </el-input>
      <cos :limit='1' @url="geturl" :index="index" :imgUrl='form.options[index].img'></cos>
      </div>
    </el-form-item>
    <el-form-item v-show="options1">
    <el-button :disabled="disabled" @click="add" type="danger">+增加选项</el-button>
   </el-form-item>
 <!-- 解析视频-->
    <el-form-item label="解析视频" >
    <el-input v-model="form.videoURL"></el-input>
  </el-form-item>
  <!-- 答案解析-->
  <el-form-item label="答案解析" prop="answer" >
   <quill-editor class="editor"  v-model="form.answer" contenteditable="true"></quill-editor>
  </el-form-item>
 <!-- 题目备注-->
    <el-form-item label="题目备注">
    <el-input type="textarea" v-model="form.remarks" ></el-input>
  </el-form-item>
 <!-- 试题标签 -->
    <el-form-item label="试题标签" >
    <el-select  placeholder="请选择试题标签" v-model="form.tags">
      <el-option v-for="item in tags" :key="item.id" :label="item.tagName"  :value="item.id"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item>
      <el-row>
  <el-button type="primary" @click="addlist" >{{getTitle}}</el-button>
</el-row>
  </el-form-item>
</el-form>
</el-card>
  </div>
</template>

<script>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { subjectsSimpleApi } from '../../api/hmmm/subjects'
import { add, questionsDetailApi, update } from '../../api/hmmm/questions'
import { directorys, list } from '../../api/hmmm/directorys'
import { companys } from '../../api/hmmm/companys'
import { provinces, citys } from '../../api/hmmm/citys'
import { direction, questionType, difficulty } from '../../api/hmmm/constants'
import { tags } from '../../api/hmmm/tags'
import cos from '../components/cos'
// import axios from 'axios'
// import { router } from '../../router/index'
export default {
  data () {
    return {
      fileList: [],
      form: {
        subjectID: '', // 1
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: 1,
        difficulty: 1,
        question: '', // 也可以
        videoURL: '',
        answer: '', // 题干
        remarks: '',
        tags: '',
        options: [
          {
            code: 'A',
            img: '',
            isRight: false,
            title: ''
          },
          {
            code: 'B',
            img: '',
            isRight: false,
            title: ''
          }, {
            code: 'C',
            img: '',
            isRight: false,
            title: ''
          }, {
            code: 'D',
            img: '',
            isRight: false,
            title: ''
          }
        ]

      },
      code: '',
      code1: [],
      subjects: [],
      directorys: [],
      companys: [],
      provinces: provinces(),
      citys: [],
      direction: [],
      tags: [],
      options: [
        {
          code: 'A',
          img: '',
          isRight: false,
          title: ''
        }],
      url: '',
      name: '',
      questionType1: '',
      questionType: questionType,
      difficulty: difficulty,
      loading: false,
      disabled: true,
      options1: true,

      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择标题', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择公司', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        citys: [
          { required: true, message: '请选择区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择提型', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
        ],
        answer: [
          { required: true, message: '请输入内容', trigger: ['blur', 'change'] }
        ]
      },
      data: {
        page: 1,
        pagesize: 10
      },
      pages: '',
      upurl: []

    }
  },
  components: {
    quillEditor,
    cos
  },
  created () {
    if (this.$route.query.id) {
      this.getDetail(this.$route.query)
    }
    this.getSubjects()
    // this.getDirectorys()
    this.getCompanys()
    this.getDirection()
  },
  mounted () {
    // 刷新后回到顶部
    window.addEventListener('beforeunload', (e) => {
      window.scroll(0, 0)
    })
  },

  methods: {

    async getSubjects () {
      const { data } = await subjectsSimpleApi()

      // this.pages = data.pages
      this.subjects = data
      // console.log(data)
      // this.load()
    },
    async getCompanys () {
      const { data: { items } } = await companys()
      this.companys = items
    },
    async getDirectorys () {
      this.form.catalogID = ''
      const response = await directorys()
      this.data.pagesize = response.data.length
      const { data } = await list(this.data)
      const arr = data.items
      console.log(this.form.subjectID)
      const res = this.subjects.find(item => item.value === this.form.subjectID)
      if (res === '') {
        this.directorys = []
      } else {
        const aa = arr.filter(item => item.subjectID == res.value)
        this.directorys = aa
      }
      this.getTage()
    },
    getDirection () {
      this.direction = direction
    },
    // eslint-disable-next-line vue/return-in-computed-property
    getCitys () {
      this.form.citys = ''
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.citys = citys(this.form.province)
    },
    radio () {
      if (this.form.questionType == 2) {
        this.options1 = true
        this.disabled = false
      } else if (this.form.questionType == 3) {
        this.options1 = false
      } else {
        this.options1 = true
        this.disabled = true
      }
    },
    async getTage () {
      const { data: { items } } = await tags()
      const tages = items
      // console.log(items)
      const res = this.subjects.find(item => item.id == this.form.subjectID)
      if (!res) {
        this.tags = []
      } else {
        const aa = tages.filter(item => item.subjectID == res.id)
        this.tags = aa
        // console.log(aa)
      }
    },
    add () {
      if (this.form.options.length < 26) {
        const obj = {
          code: String.fromCharCode(this.form.options.length + 65),
          img: '',
          isRight: false,
          title: ''
        }
        this.form.options.push(obj)
      } else {
        alert('没有更多字母了')
      }
    },
    onchick (e) {
      console.log(e)
      const res = this.form.options.findIndex(item => item.code == e)
      this.form.options[res].isRight = !this.form.options[res].isRight
    },
    addlist () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.$route.query.id) {
            this.form.questionType = this.form.questionType.toString()
            this.form.difficulty = this.form.difficulty.toString()
            const res = await update(this.form)
            console.log(res)
            if (res.status == 200) {
              this.$message.success('恭喜修改成功')
              this.form.options = []
              this.$refs.ruleForm.resetFields()
              this.$router.push('/questions/list')
            } else {
              this.$message('修改失败')
            }
          } else {
            // 向后台发送请
            const res = await add(this.form)
            if (res.status == 200) {
              this.$message.success('恭喜添加成功')
              this.$refs.ruleForm.resetFields()
              this.$router.push('/questions/list')
            } else {
              this.$message('添加失败')
            }
          }
        } else {
          // 就像用户提示发生错误的消息
          this.$message('数据不可以为空')
        }
      })
    },

    async getDetail (id) {
      const { data } = await questionsDetailApi(id)
      if (data.questionType == 2) {
        data.options.forEach(item => {
          if (item.isRight == '1') {
            this.code1.push(item.code)
            console.log(this.code)
          }
        })
      } else {
        data.options.forEach(item => {
          if (item.isRight == '1') {
            this.code = item.code
            console.log(this.code)
          }
        })
      }
      data.questionType = +data.questionType
      data.difficulty = +data.difficulty
      this.form = data
      this.radio()
    },
    geturl (url) {
      console.log(url)
      this.form.options[url.id].img = url.url
    }
  },

  computed: {
    getVal () {
      return this.code1
    },
    getVals () {
      return this.code1
    },
    getId () {
      return this.$route.query.id ? '试题修改' : '试题录入'
    },
    getTitle () {
      return this.$route.query.id ? '确认修改' : '确认提交'
    },
    getRoter () {
      return this.$route.query
    }
  },
  watch: {
    getVal () {
      const res = this.form.options.findIndex(item => this.code === item.code)
      this.form.options.forEach(item => {
        item.isRight = false
      })
      this.form.options[res].isRight = true
    },
    getVals () {
      this.form.options.forEach(item => {
        item.isRight = false
      })
      this.code1.forEach(item => {
        const res = this.form.options.findIndex(items => item === items.code1)
        this.form.options[res].isRight = true
      })
    },
    getRoter () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 20px;
}
.editor {

  height: 200px;
  margin-bottom:100px;
}
.item{
  padding-bottom: 20px;
  display: block;
  .el-radio-group {
    display: inline-block;
    margin-right: 10px;
  }
  .el-checkbox-group {
    display: inline-block;
    margin-right: 10px;
  }
  .el-input {
  margin-right: 10px;
}

}
::v-deep .el-input {
  width: 400px;
}
 ::v-deep .avatar-uploader {

  // transform: translate(20px,15px);
  display: inline-block;
  // width: 200px;
  // height: 200px;
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 30px;
    height: 20px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
::v-deep .el-upload--picture-card{
  line-height: 50px;
  text-align: center;
  display: inline-block;
width: 80px;
height: 50px;
.el-upload__text{
  width: 80px;
height: 50px;

}
}
</style>
